<template>
  <div>
    <customContainer ref="mainRef" :config="mainConfig" />
    <div>
      <el-dialog v-model="open" title="新增空白流程模型" width="500px">
        <el-form
          ref="formDatas"
          v-loading="loading"
          :rules="rules"
          :model="formData"
          label-width="100px"
          label-position="right"
          status-icon
        >
          <el-form-item label="模型名称：" prop="name">
            <el-input v-model="formData.name" maxlength="20" show-word-limit />
          </el-form-item>

          <el-form-item label="标识Key：" prop="key">
            <el-input v-model="formData.key" maxlength="20" show-word-limit />
          </el-form-item>

          <el-form-item label="备注：" prop="description">
            <el-input
              v-model="formData.description"
              type="textarea"
              maxlength="30"
              show-word-limit
            />
          </el-form-item>

          <el-form-item align="center">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="open=false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <design :id="rowId" ref="designRef" @change-list="init"></design>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineAsyncComponent, computed, getCurrentInstance } from 'vue'
import { ElButton, ElMessageBox, ElMessage } from 'element-plus'
import { modelList, addModel, bsModel, delModel } from '@/api/workflow/index'

const design = defineAsyncComponent(() => import('./components/design.vue'))
const loading = ref(false)
const open = ref(false)
const formData = ref({
  name: '',
  key: '',
  description: '',
})
const rowId = ref([])
const rules = {
  name: [
    { required: true, message: '请输入模型名称', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
  ],
  key: [
    { required: true, message: '请输入标识Key', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
  ],
  description: [
    { max: 30, message: '长度不能超过30个字符', trigger: 'blur' },
  ],
}
const queryParams = ref({ 
  name: '',
  key: '',
  pageSize: 10,
  pageNum: 1 })
const formDatas = ref(null),
  {
    proxy,
  } = getCurrentInstance()
const mainRef = ref(null)
const designRef = ref(null)
const clickAdd = () => {
  open.value = true
}
// 流程设计

const clickDesign = (row: { [key: string]: any }) => {
  rowId.value = row.id
  designRef.value.open1 = true
}
// 部署
const clickDeploy = (row: { [key: string]: any }) => {
  const name = row.name
  const id = row.id
 
  ElMessageBox.confirm(`您确定部署【"${ name }"}】吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => bsModel(id)).then((res => {
    if (res.code == 200) {
      init()
      ElMessage.success('部署成功')
    }
  }))
}
 
const clickDelete = (row: { [key: string]: any }) => {
  const name = row.name
  const id = row.id
  ElMessageBox.confirm(`您确定删除【"${ name }"}】吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => delModel(id)).then((res => {
    if (res.code == 200) {
      init()
      ElMessage.success('删除成功')
    }
  }))
}
const submitForm = () => {
  proxy.$validateForm(formDatas.value, () => {
    addModel(formData.value).then(res => {
      loading.value = true
      try {
        if (res.code == 200) {
          ElMessage.success('新增成功!')
          open.value = false
          loading.value = false
          // formData.value = ''
          init()
        } else {
          loading.value = false
          ElMessage.error(res.msg)
        }
      } catch {
        loading.value = false
      }
    })
  })
}
const init = () => {
  queryParams.value.pageNum = 1
  mainRef.value.getList()
}
const handleTableSelect = (rows: { [key: string]: any }[]) => {
  console.log(rows)
}
const mainConfig = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '模型名称',
            prop: 'name',
            option: {
              placeholder: '请输入名称',
            },
          },
          {
            label: '标识Key',
            prop: 'key',
            option: {
              placeholder: '请输入标识Key', 
            },
          },
        ],
        queryParams: queryParams.value,
      },
      btns: [
        {
          title: '新增流程模型',
          type: 'primary',
          onClick: clickAdd,
        },
      ],
      table: {
        // formatter: formatterRules,
		
        columns: [
          { label: '序号', type: 'index', width: '50', align: 'center' },
          { label: '模型名称', prop: 'name', width: '150', align: 'center' },
          { label: '标识Key', prop: 'key', width: '120', align: 'center' },
          { label: '版本号', prop: 'version', align: 'center' },
          { label: '备注说明', prop: 'description', align: 'center' },
          { label: '创建时间', prop: 'createDate', align: 'center' },
          { label: '更新时间', prop: 'updateDate', align: 'center' },
          {
            label: '操作',
            align: 'center',
            width: '300',
            fixed: 'right',
            render(h, params) {
              const buttons = [
                {
                  title: '设计流程',                
                  clickFun: clickDesign,
                },
                {
                  title: '部署流程',                
                  clickFun: clickDeploy,
                },
                {
                  title: '删除',                
                  clickFun: clickDelete,
                }, 
              ]
              return buttons.map((el) => h(
                ElButton,
                {
                  text: true,
                  type: 'primary',
                  // icon: el.icon,
                  onClick: () => {
                    el.clickFun(params.row)
                  },
                },
                {
                  default: () => el.title,
                },
              ))
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            handleTableSelect(rows)
          },
        },
      },
      api: modelList,
      customKey: 'workflow/processManage',
    }
  },
  set(val) {
    return val
  },
})
</script>